<template>
 <!--使用根模块state的数据-->
 <div>{{$store.state.username}}</div>
  <button @click="fn">改变名字</button>
  <button @click="$store.commit('editname')">改变</button>
  <button @click="$store.dispatch('updatename')" >3秒后改变名字</button>
  <!--使用根模块getters的数据-->
  <div>{{$store.getters['newname']}}</div>
</template>
<script>
import { useStore } from 'vuex'
export default{
  name:'App',
  setup(){
    // 使用vuex仓库
    const store=useStore()
    // 使用根模块state的数据
    console.log(store.state.username);
    // 使用根模块getters的数据
    console.log(store.getters.newname);
    // store.commit('editname')
    const fn=()=>{
      // 调用根模块mutations函数
      store.commit('editname')
    }
    // 调用根模块action函数
    // store.dispatch('updatename');
    return {fn}
  }
}
</script>
<style>

</style>
